<template>
    <div class="centerclientuserinfo centeractiondetail center">
        <!-- 用户信息 -->
        <div class="info firstinfo">
            <div class="follow_status">
                <span :class="{'normal': !showhome}"><span class="label">当前状态：</span><span class="staff_status">{{ leave_status }}</span></span>
                <span class="edits"  @click="personedit" v-if="showhomeedit">
                        <img :src="`${imgUrl}publicicon/icon_edit.png`" alt="">
                        <text>编辑资料</text>
                </span>
            </div>
            <div class="usremessage">
                <img :src='userCard.user_picture'
                     alt="" class="user_img">
                <div class="person_mesage">
                    <p class="name">{{ prebookDetail.name == ''?'暂无名字':prebookDetail.name }}</p>
                    <p class="label">职位：{{ prebookDetail.job == ''?'暂无手机号':prebookDetail.job }}</p>
                    <p class="label">店铺：{{ prebookDetail.nick_name == ''?'暂无来源':prebookDetail.nick_name }}</p>
                </div>
            </div>
        </div>
        <!-- 浏览数据 -->
        <div class="info customer">
            <div class="list_wrap">
                <div class="list_title">
                    <div class="list_title_name">员工店铺数量</div>
                    <!-- <div class="list_title_right" @click="skiptorank(0)">
                               </div>-->
                </div>
                <div class="list_body">
                    <div class="list_body_top">
                        24小时内总计有
                        <span class="text_main_color">{{ oneDayVistor }}</span> 位客户进店
                    </div>
                    <div class="list_body_bottom">
                        <div v-for="item in countReport"
                             :key="item.id">
                            <div class="list_body_bottom_top">{{ item.name }}</div>
                            <div>
                                <span class="text_main_color">{{ item.value }}</span>{{ item.text }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="info customer">
            <div class="func">
                <ul>
                    <!-- <router-link :to="{name:'Decoration', params:{fottershow:'true',fotertext:'新增装修案例'}}"></router-link>-->
                    <li @click="skiptoclient">
                        <i class="icon_func icon_func2"/>
                        <p class="func_title">店铺预约单</p>
                        <p class="price_num"
                           v-if="prebook_count_add>0">{{ prebook_count_add>99?'99+':prebook_count_add }}</p>
                    </li>
                    <li @click="skiptostore"
                        v-if="material==5">
                        <i class="icon_func icon_func3"/>
                        <p class="func_title">店铺素材</p>
                    </li>
                    <li @click="skiptotrans">
                        <i class="icon_func icon_func4"/>
                        <p class="func_title">转移客户</p>
                    </li>
                     <!-- v-if="prebookDetail.status==3" -->
                    <li v-if="prebookDetail.status==3" @click="appointquit">
                        <i class="icon_func icon_func1"/>
                        <p class="func_title">离职状态</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="info customer">
            <div class="customer_box">
                <p class="customer_title">员工行为轨迹<span v-if="trajectory">({{ userAllTraceList.total }})</span></p>
                <div class="record_list">
                    <ul v-if="trajectory">
                        <li class="record_wrap"
                            v-for="(item,index) in userAllTraceList.data" :key="index">
                            <div class="record_top">
                                <div class="record_type">{{ item.path_name }}</div>
                            </div>
                            <div class="record_bottom">
                                <p>{{ item.view_time_last*1000 | formatTime }}</p>
                            </div>
                        </li>
                    </ul>
                    <div class="record_type"
                         v-if="!trajectory">游客暂无行为轨迹记录
                    </div>
                    <p class="look_more label"
                       @click="skipallaction" v-if="trajectory">查看所有行为轨迹 <img :src="`${imgUrl}login/right.png`">
                    </p>
                </div>
            </div>
        </div>
        <div class="info customer">
            <div class="customer_box">
                <p class="customer_title">分享裂变记录<span v-if="showhome">({{ fissionList.total }})</span></p>
                <div class="record_list">
                    <ul v-if="showhome">
                        <li class="record_wrap"
                            v-for="(item,index) in fissionList.data" :key="index">
                            <div class="record_top">
                                <div class="record_type">{{ item.path_name }}</div>
                            </div>
                            <div class="record_bottom">
                                <p>{{ item.view_time_last*1000 | formatTime }}</p>
                            </div>
                        </li>
                    </ul>
                    <div class="record_type"
                         v-if="!showhome">游客暂无裂变记录
                    </div>
                    <p class="look_more label"
                       @click="skipfission" v-if="showhome">查看所有裂变记录 <img :src="`${imgUrl}login/right.png`"></p>
                </div>
            </div>
        </div>
        <quit-module ref="mquit"/>
    </div>
</template>

<script>

const STATUS_DIC = {
	1: '待确认',
	2: '已确认',
	3: '申请离职',
	4: '已离职',
	5: '驳回申请'
}
import { getUserDetail } from '@/api/staffManage'
import quitModule from '@/pages/components/quitModule'
// import {formatDate} from '../../util/datatime'

export default {
	name: 'staffDetail',
	components: {
		quitModule
	},
	// filters: {
	//     formatDate(time) {
	//         let date = new Date(time);
	//         return formatDate(date, 'yyyy-MM-dd hh:mm');
	//     },
	// },
	data() {
		return {
			imgUrl: this.$constant.imgUrl,
			headtitle: '客户详情',
			relation_user_id: '',
			name: '暂无名字',
			nick_name: '暂无昵称',
			prebook_source: '暂无来源',
			leave_status: '', // 当前状态
			oneDayVistor: '', // 24小时访问量
			prebook_count_add: '', // 新增约单数量
			material: '',
			user_picture: '',
			backstatus: true,
			scrollTop: 0,
			owner_user_id: '',
			mobile_phone: '',
			create_user_id: '',
			prebookDetail: '', // 基本信息
			userAllTraceList: '', // 行为轨迹
			fissionList: '', // 分享裂变记录
			userChain: '',
			role_id: '',
			phone: '',
			countReport: [
				{
					name: '今日新增客户',
					value: 0,
					text: '名'
				},
				{
					name: '总计获客',
					value: 0,
					text: '名'
				},
				{
					name: '今日访问',
					value: 0,
					text: '次'
				},
				{
					name: '总计历史访问',
					value: 0,
					text: '次'
				}
			],
			sharename: '暂无',
			parentname: '暂无',
			formtime: '--',
			showstatus: true,
			showhome: true,
			showhomeedit: true,
			lastforms: true,
			trajectory: true,
			showshop: false,
			userCard: '',
			option: {}

		}
	},
	onLoad(option) {
		this.option = option
		this.owner_user_id = option.user_id
		this.relation_user_id = option.relation_user_id
		this.mobile_phone = option.mobile_phone
		this.create_user_id = option.create_user_id
	},
	onShow() {
		this.getinformation()
	},
	methods: {
		getinformation() {
			let that = this
			const params = {
				relation_user_id: this.relation_user_id
			}
			getUserDetail(params).then((res) => {
				let listdata = res.data
				if (res.data.userData) {
					this.prebookDetail = listdata.userData
					this.leave_status = STATUS_DIC[listdata.userData.status]
				}
				const { oneDayVistor, todayVistor, todayPageView, totalVistor, totalPageView } = listdata.countReport
				this.oneDayVistor = oneDayVistor || '0'
				this.countReport[0].value = todayVistor
				this.countReport[1].value = totalVistor
				this.countReport[2].value = todayPageView
				this.countReport[3].value = totalPageView
				this.prebook_count_add = listdata.count_data.prebook_count_add
				this.userAllTraceList = listdata.trace
				this.fissionList = listdata.fissionList
				this.userCard = listdata.userCard
			}).catch((e) => {
				if (e.status === 'failed') {
					this.showhomeedit = false
				    this.showhome = false
				}
			})
		},
		appointquit() { // 打开离职弹框
			this.$refs.mquit.openPop()
			this.$refs.mquit.putllstatus = 'memberdetail'
			this.$refs.mquit.quitid = this.relation_user_id
		},
		personedit() { // 到编辑页
			uni.navigateTo({
				url: `/pages/admin/staffManage/addStaff?id=${this.relation_user_id}`
			})
		},
		skiptoaction() { // 到店铺浏览量那边
			// this.$router.push({
			//     name: 'CenterAction',
			//     query: {
			//         owner_user_id: this.$route.query.user_id,
			//     },
			// });
		},
		// 到预约单
		skiptoclient() {
			const params = {
				staff_user_id: this.option.user_id,
				user_id: this.owner_user_id
			}
			uni.navigateTo({
				url: `/pages/order/subscribeOrder${this.commonJS.queryData(params)}`
			})
		},
		skipallaction() {
			// 到客户行为轨迹详情
			if (this.userAllTraceList === '') {
				uni.showToast({
					title: '没有数据可查',
					icon: 'none'
				})
			} else if (this.userAllTraceList.data.length !== 0) {
				const query = {
					owner_user_id: this.owner_user_id,
					stats_type: this.userAllTraceList.data[0].stats_type,
					for_user_id: this.userAllTraceList.data[0].create_user_id,
					end_time: this.userAllTraceList.data[0].view_time_last,
					create_user_id: this.userAllTraceList.data[0].create_user_id,
					tabIndex: 0
				}
				uni.navigateTo({
					url: `/pages/order/centerActionDetail${this.commonJS.queryData(query)}`
				})
			} else {
				uni.showToast({
					title: '没有数据可查',
					icon: 'none'
				})
			}
		},
		skipfission() {
			// 裂变数据详情
			if (this.fissionList === '') {
				uni.showToast({
					title: '没有数据可查',
					icon: 'none'
				})
			} else if (this.fissionList.data.length === 0) {
				uni.showToast({
					title: '没有数据可查',
					icon: 'none'
				})
			} else {
				let query = {
					owner_user_id: this.owner_user_id,
					stats_type: this.fissionList.data[0].stats_type,
					for_user_id: this.fissionList.data[0].user_id,
					end_time: this.fissionList.data[0].view_time_last,
					create_user_id: this.fissionList.data[0].create_user_id,
					tabIndex: 1
				}
				uni.navigateTo({
					url: `/pages/order/centerActionDetail${this.commonJS.queryData(query)}`
				})
			}
		},
		skiptostore() { // 到店铺素材
			this.$router.push({
				name: 'Storematerial',
				query: {
					user_id: this.owner_user_id,
					stats_type: 520
				}
			})
		},
		skiptotrans() { // 转移客户
			uni.navigateTo({
				url: `/pages/admin/staffManage/transferMember?user_id=${this.owner_user_id}`
			})
			// this.$router.push({
			// 	name: 'TransferMember',
			// 	query: {
			// 		user_id: this.$route.query.user_id,
			// 		stats_type: 520
			// 	}
			// })
		},
		showToast(title) {
			uni.showToast({
				title,
				icon: 'none'
			})
		}
	}
}
</script>

<style scoped lang="scss">
page,body {
    background-color: #f5f5f5 !important;
}
.staff_status {
    color: #333;
}
.center .func {
    margin: auto;
    margin-top: 20px;
    padding: 0 15px;
    width: 700px;
    height: 180px;
    clear: both;
    width: 94%;
    margin-left: 3%;
    float: left;
    background-color: #fff;
    border-radius: 15px;
    box-sizing: border-box;
    ul {
         display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    }
}
.centerclientuserinfo .label{
  color: #999999;
}
    .look_more{
  clear: both;
  font-size:24px;
  padding: 40px;
  text-align: center;
  position: relative;
}
.look_more img{
  float: right;
  width: 15px;
  height: 28px;
  position: relative;
  right: 23%;
  top: 6px;
}
    .customer_title{
    margin-top: 20px;
    font-size: 30px;
    margin-bottom: 40px;
    font-weight: bold;
}
    .customer_box .customer_inter{
  border: none;
}
    .customer_box{
  width: 90%;
  float: left;
  margin-left: 40px;
  border-top: 2rpx solid #ddd;
}
    .center .func_title {
    font-size: 24px;
    color: #333;
    margin-top: 10px;
}
    .person_mesage{
  width: 54%;
  font-size: 24px;
  margin-left: 10px;
}
.person_mesage .label {
    margin-top: 10px;
}
.person_mesage .name{
  font-size: 34px;
  margin-bottom: 15px;
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  overflow: hidden;
  text-overflow: ellipsis;
}
    .edits{
  float: right;
  margin-right: 29px;
}
.edits img{
  float: left;
  width: 28px;
  height: 28px;
  margin-top: 25px;
  margin-right: 10px;
}
    .follow_status{
  height: 80px;
  font-size: 30px;
  line-height: 80px;
}
    .center .icon_func {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: center center / 100% 100% no-repeat;
}
 .center .icon_func1 {
    background-image: url($imgUrl + 'center/icon_func1.png');
}
.center .icon_func2 {
    background-image: url($imgUrl + 'center/icon_func2.png');
}
.center .icon_func3 {
    background-image: url($imgUrl + 'center/icon_func3.png');
}
.center .icon_func4 {
    background-image: url($imgUrl + 'center/icon_func4.png');
}
.center .icon_func5 {
    background-image: url($imgUrl + 'center/icon_func5.png');
}

    .centeractiondetail {
        background-color: #fff;
        .record_list {
            margin-top: 40px;
            ul {
                border-left: 2px solid #ccc;
            }
            .record_wrap {
                padding-left: 30px;
                margin-bottom: 50px;
                .record_top {
                    position: relative;
                    top: -10px;
                    display: flex;
                    align-items: center;
                    color: #666;
                    .record_type {
                        font-size: 30px;
                    }
                    & > div {
                        margin-right: 20px;
                    }
                }
                .record_top::before {
                    position: absolute;
                    left: -42px;
                    content: '';
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    border: 4px solid #fff;
                    border-radius: 50%;
                    background-color: #ccc;
                }
                .record_bottom {
                    /*background-color: #f5f5f5;*/
                    border-radius: 16px;
                    display: flex;
                    font-size: 24px;
                    color: #999999;
                    align-items: center;
                    .record_img {
                        width: 168px;
                        height: 130px;
                        margin-right: 20px;
                        img {
                            width: 100%;
                            height: 100%;
                            border-top-left-radius: 16px;
                            border-bottom-left-radius: 16px;
                        }
                    }
                    .attr_img {
                        width: 130px;
                    }
                    .record_bottom_main {
                        color: #333;
                        font-size: 30px;
                        margin-bottom: 10px;
                    }
                }
            }
            .record_wrap:nth-child(1) {
                .record_type {
                    color: #ff6900;
                }
                .record_top::before {
                    background-color: #ff9600;
                }
            }
        }
    }

    .centerclientuserinfo .record_list {
        padding: 0;
        margin-left: 20px;
    }

    .centerclientuserinfo .firstinfo.info {
        margin-top: 0;
    }

    .centerclientuserinfo .info {
        width: 100%;
        float: left;
        padding-left: 40px;
        background-color: #fff;
        box-sizing: border-box;
        margin-top: 20px;
    }
    .centerclientuserinfo .customer {
        padding-left: 0;
    }

    .returnback {
        margin-top: 10px;
        width: 40px;
        height: 40px;
    }

    .linkbtns {
        width: 160px;
        height: 70px;
        float: left;
        line-height: 70px;
        background: #ffffff;
        border: 1px solid #666666;
        border-radius: 35px;
    }

    .linkbtns i {
        float: left;
        width: 42px;
        height: 42px;
        margin: 15px 10px 0 25px;
    }

    .linkbtns .info_func_tip {
        line-height: 70px;
        float: left;
    }

    .normal {
        color: #cccccc;
    }

    .client_line {
        float: left;
        height: 40px;
    }

    .usremessage {
        display: flex;
        width: 96%;
        margin-right: 10px;
        margin-top: 20px;
        padding-bottom: 20px;
        .user_img {
            border-radius: 50%;
             width: 120px;
  height: 120px;
  margin-right: 10px;
        }
    }

    .list_wrap {
        margin: 20px 25px 0;
        border-radius: 15px;
        background-color: #fff;
        .list_title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 20px;
            border-top: 2px solid #ddd;
            .list_title_name {
                font-size: 30px;
                font-weight: 600;
            }
            .list_title_right {
                display: flex;
                align-items: center;
                font-size: 24px;
                font-weight: 400;
                img {
                    width: 24px;
                    height: 22px;
                    margin-right: 10px;
                }
            }
        }
        // data style
        .list_body {
            padding: 26px 0 20px 24px;
            .list_body_top {
                font-size: 26px;
                margin-bottom: 40px;
            }
            .list_body_bottom {
                display: flex;
                align-items: center;
                & > div {
                    width: 25%;
                }
                .list_body_bottom_top {
                    margin-bottom: 20px;
                }
                .text_main_color {
                    font-size: 30px;
                    font-weight: 600;
                    margin-right: 6px;
                }
            }
        }
        // item style
        .list_item {
            font-size: 26px;
            margin: 0 20px 0;
            // padding: 20px 20px;
            background-color: #f3f4f8;
            border-radius: 10px;
            .list_item_top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .list_item_top_left {
                    display: flex;
                    align-items: center;
                    .list_icon {
                        width: 30px;
                        height: 30px;
                        margin-left: 10px;
                    }
                }
            }
            .list_item_bottom {
                & > span {
                    margin-right: 10px;
                }
            }
            .text_sub_com {
                font-size: 26px;
            }
        }
        .item_more {
            padding: 40px 0;
            text-align: center;
            font-size: 30px;
        }
        .center_scroll_wrap {
            height: 150px;
            overflow: hidden;
        }
    }

    .center .icon_func2 {

    }

    .center .icon_func3 {
        background-image: url($imgUrl + "publicicon/icon_memmaterial.png");
    }

    .center .icon_func4 {
        background-image: url($imgUrl + "publicicon/icon_memtransform.png");
    }

    .center .icon_func1 {
        background-image: url($imgUrl + "publicicon/icon_memquitsta.png");
    }

    .func ul li {
        text-align: center;
        position: relative;
    }

    .price_num {
        right: 25px;
        top: -10px;
        width: 30px;
        height: 30px;
        float: right;
        color: white;
        text-align: center;
        line-height: 30px;
        border-radius: 50%;
        position: absolute;
        background: red;
    }

    .centeractiondetail {
        background: none;
    }

    /*  .center .icon_func{
          margin-left: 27%;
      }
      .center .icon_func4{
          margin-left: 25%;
      }*/
</style>
